<template>
  <el-dialog title="导入文件" :visible.sync="dialogVisible" width="100" :before-close="handleClose">
    <span>目录：</span>
    <el-cascader :options="tree_list" v-model="dataList.directoryId" :show-all-levels="false" @change="threeChange" :props="{ value: 'id', checkStrictly: true }" clearable></el-cascader>
    <br />
    <br />
    <span>模型类型：</span>
    <el-cascader :options="modelTypeoptions" v-model="dataList.modelType" :show-all-levels="false" @change="modelChange" :props="{ value: 'value', checkStrictly: true }" clearable></el-cascader>
    <br />
    <br />
    <span>导入文件：</span>
    <br />
    <br />
    <el-upload class="upload-demo" drag :data="dataList" :action="Updata.action" :headers="myHeaders" :type="Updata.type" :on-success="onSuccess" :on-error="onSuccess">
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
    </el-upload>
  </el-dialog>
</template>

<script>
import { getToken } from '@/utils/auth'
export default {
  name: 'import',
  props: ['tree_list'],
  data() {
    return {
      myHeaders: { access_token: getToken() },
      dialogVisible: true,
      Updata: {
        action: process.env.VUE_APP_BASE_API + '/system/metadataModel/table/import',
        type: 'post',
      },
      dataList: {
        directoryId: '',
        modelType: '',
        type: 4,
      },
      modelTypeoptions: [
        {
          value: '字典表',
          label: '字典表',
        },
        {
          value: '关联表',
          label: '关联表',
          children: [
            {
              value: '业务数据表',
              label: '业务数据表',
            },
            {
              value: '基础数据表',
              label: '基础数据表',
            },
          ],
        },
      ],
    }
  },
  mounted() {
    this.dataList.modelType = this.modelTypeoptions[0].value
    this.dataList.directoryId = this.tree_list[0].children[0].id
  },
  methods: {
    threeChange(item) {
      this.dataList.directoryId = item[item.length - 1]
    },
    modelChange(item) {
      this.dataList.modelType = item[item.length - 1]
    },
    handleClose() {
      this.$emit('change')
    },
    onSuccess(response, file, fileList) {
      if (response.code === 0) {
        this.$message.success(response.msg)
    
      } else {
        this.$message.error(response.msg)
      }
      this.handleClose()
    },
    onError(err, file, fileList) {
      console.log(err, file, fileList)
    },
  },
}
</script>
<style lang="scss">
.span {
  color: #606266;
  font-weight: 700;
  font-size: 14px;
}

.el-upload {
  width: 100% !important;
}

.el-dialog__body {
  padding: 20px !important;
}
</style>
